
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Table,Pagination ,Input,Button,message,Modal,Row,Col,Select,Popconfirm,Tabs} from 'antd';
import styles from '../AllEmergencysupplies/index.less';
import {TimeSpan} from '../../utils';
const TabPane = Tabs.TabPane;
export default connect(({ Allemerg, loading }) => ({ Allemerg, loading }))(({Allemerg, dispatch,loading})=>
    <div className={styles.container}><PagesPOST dispatch={dispatch} {...Allemerg} loading={loading.global}/></div>);


class PagesPOST extends React.Component {

    constructor (props) {
        super(props);
        this.state = {
            standard: "",
            remark :"",
        };
    }
    componentWillMount () {
        this.props.dispatch({
            type:'Allemerg/getAllemergList',payload:{id:localStorage.getItem('id')},
        });
    }
    render (){
        let {getAllemergListData,visible,dispatch,record,loading,getData} = this.props;
        const dataFrom = getAllemergListData?getAllemergListData:{};
        // console.log(dataFrom);
        return <div style={{padding:20}}>
            <h2>应急物资详情</h2>
            <div className={styles.rowS}>
                <div className={styles.divIt}>
                    <b>物资名称：</b><span>{dataFrom.material_name}</span>
                </div>
                <div className={styles.divIt}>
                    <b>型号：</b><span>{dataFrom.model}</span>
                </div>

                <div className={styles.divIt}>
                    <b>检查周期：</b><span>{dataFrom.check_time== "1"?'年':dataFrom.check_time== "2"?"月":
                        dataFrom.check_time== "3"?'周':"日"
                    }</span>
                </div>
            </div>
            <div className={styles.rowS}>
                <div className={styles.divIt}>
                    <b>物资管理员：</b><span>{dataFrom.addressBooks}</span>
                </div>
                <div className={styles.divIt}>
                    <b>物资编号：</b><span>{dataFrom.material_num}</span>
                </div>
                <div className={styles.divIt}>
                    <b>数量：</b><span>{dataFrom.quantity}</span>
                </div>
            </div>
            <div className={styles.rowS}>
                <div className={styles.divIt}>
                    <b>库存点名称：</b><span>{dataFrom.address_name}</span>
                </div>
                <div className={styles.divIt}>
                    <b>状态：</b><span>{dataFrom.stat == '1'?'正常':dataFrom.stat == '1'?'已使用':"失效"}</span>
                </div>
                <div className={styles.divIt}>
                    <b>描述：</b><span>{dataFrom.remark}</span>
                </div>
            </div>
            <div className={styles.rowS}>
                <div className={styles.divIt}>
                    <b>过期时间：</b><span>{TimeSpan(dataFrom.overdue_time)}</span>
                </div>
                <div className={styles.divIt}>
                    <b>创建时间：</b><span>{TimeSpan(dataFrom.overdue_time)}</span>
                </div>
            </div>
            {/* <Button style={{margin:10}} type='primary' onClick={
                ()=>dispatch({type:'emerg/save',payload:{visible:true}})
            }>添加检查标准</Button> */}
            <Tabs style={{marginTop:10}} onChange={(value)=>{
                if (value == 1){
                    this.props.dispatch({
                        type:'Allemerg/getAllemergList',payload:{id:localStorage.getItem('id')},
                    });
                }else {
                    this.props.dispatch({
                        type:'Allemerg/getAllemergListTow',payload:{
                            d_id:localStorage.getItem('id'),
                            pageNumber:0,
                            pageSize:0,
                        },
                    });
                }
            }} type="card">
                <TabPane tab="检查/实验标准" key="1">
                    <Table
                        columns={[
                            {
                                title: '序号',
                                dataIndex: 'num',
                            },
                            {
                                title: '检查标准',
                                dataIndex: 'standard',
                            },
                            {
                                title: '备注',
                                dataIndex: 'remark',
                            },
                            {
                                title: '创建时间',
                                dataIndex: 'create_time',
                                render:text => TimeSpan(text),
                            },
                            // {
                            //     title: '操作',
                            //     dataIndex: 'option',
                            //     render:(text,record) =>
                            //         <Popconfirm title="确定移除?" onCancel={()=>{}} onConfirm={
                            //             ()=> dispatch({type:"emerg/listDelete",payload:{id:record.id}})
                            //         } okText="是" cancelText="否">
                            //             <a style={{color:"red"}}>删除</a>
                            //         </Popconfirm>,
                            // },
                        ]}
                        size="small"
                        loading={loading}
                        rowKey={id=>id.id}
                        dataSource={dataFrom.materialStandards || null}
                        // style={{marginTop:-16}}
                        position={{
                            pageSize:10,
                            showSizeChanger: false,
                        }} />
                </TabPane>
                <TabPane tab="物资巡查记录" key="2">
                    <Table
                        columns={[
                            {
                                title: '记录时间',
                                dataIndex: 'check_time',
                                render:text => TimeSpan(text),
                            },
                            {
                                title: '检查情况',
                                dataIndex: 'check_remark',
                            },
                            {
                                title: '添加或者使用数量',
                                dataIndex: 'num',
                            },
                            {
                                title: '操作类型',
                                dataIndex: 'type',
                                render:text => text && text == '1'?'检查/实验':text == '2'?'补充':'使用',
                            },
                            {
                                title: '存在问题描述',
                                dataIndex: 'problem_remark',
                            },
                            {
                                title: '物资编号',
                                dataIndex: 'material_num',
                            },
                            {
                                title: '存放地址',
                                dataIndex: 'd_name',
                            },
                            {
                                title: '物资名称',
                                dataIndex: 'm_name',
                            },
                            {
                                title: '描述',
                                dataIndex: 'remark',
                            },

                        ]}
                        size="small"
                        loading={loading}
                        rowKey={id=>id.id}
                        dataSource={getData || null}
                        // style={{marginTop:-16}}
                        position={{
                            pageSize:10,
                            showSizeChanger: false,
                        }} />
                </TabPane>
            </Tabs>
            <p className={styles.divIt}>图片：</p>
            {
                dataFrom.pics && dataFrom.pics.map((itme,index)=>{
                    return <img key={index} style={{height:120,width:120,margin:10}} src={itme}/>;
                })
            }
            <br/>

            <Modal
                title={record.id?"修改检查标准":'新增检查标准'}
                visible={visible}
                confirmLoading={loading}
                onOk={()=>{
                    let {standard,remark} = this.state;
                    if(standard && remark){
                        dispatch({type:'emerg/postList',payload:{
                            standard:standard,
                            remark:remark,
                            material_id:localStorage.getItem('id'),
                        }});
                    }else{
                        message.error('请填写完整！');
                    }
                }}
                onCancel={()=>dispatch({type:"emerg/save",payload:{visible:false,record:{}}})}
            >
                <Row>
                    <Col span={6}><span><span style={{color:'red'}}>*</span>检查标准:</span></Col>
                    <Col span={14}>
                        <Input style={{width: 200, marginBottom: 10, marginTop: -4}}
                            onChange={e => this.setState({standard: e.target.value})}
                            value={this.state.standard}
                            placeholder="检查标准"/>
                    </Col>
                    <Col span={6}><span><span style={{color:'red'}}>*</span>备注:</span></Col>
                    <Col span={14}>
                        <Input style={{width: 200, marginBottom: 10, marginTop: -4}}
                            onChange={e => this.setState({remark: e.target.value})}
                            value={this.state.remark}
                            placeholder="备注"/>
                    </Col>
                </Row>
            </Modal>
        </div>;
    }
}
